<template>
    <div class="frame-outer">
        <span id="category-title">{{categoryName}}</span>
        <div id="radius-bg-base" :class="theme">
          <span class="radius-bg-font-show">{{sentence}}</span>
        </div>
        <div class="forum-list-outer">
          <template v-for="forum in forumList" :key="forum._id">
            <ForumItem :forum="forum"/>
          </template>
        </div>
    </div>
  </template>
  <script>
    import sentence from "../data/sentence"
    import ForumItem from "../components/ForumItem"
    export default {
      
      data(){
          return {
              sentence:"不乱于心，不困于情，不畏将来，不念过往。----丰子恺",
              theme:null,
              homeView:true,
              title:"hello world",
              number:"hello",
              category:null,
              categoryName:null,
              forum:"",
              forumList:[
                {
                  id:"64634ef4c1bf557ea6bf44ce",
                  title:"多态",
                  content:"多态是指根据类型的具体实现采取不同行为的能力。如果某个类型实现了某个接口，那么所有使用这个接口的地方，都可以支持这种类型的值。即不同的数据类型的实体实现提供统一的接口。Go中没有类的概念，它的多态是靠接口来实现的。",
                  browserNumber:100,
                  collectNumber:10,
                  coinNumber:35,
                },
                {
                  title:"态是指根据类型的具体实现采取不同行为的能力。如果某个类型实现了某个接口，那么所",
                  id:"64634ef4c1bf557ea6bf44ce",
                  content:"多态是指根据类型的具体实现采取不同行为的能力。如果某个类型实现了某个接口，那么所有使用这个接口的地方，都可以支持这种类型的值。即不同的数据类型的实体实现提供统一的接口。Go中没有类的概念，它的多态是靠接口来实现的。",
                  browserNumber:100,
                  collectNumber:10,
                  coinNumber:35,
                },
                {
                  title:"多态",
                  id:"64634ef4c1bf557ea6bf44ce",
                  content:"多态是指根据类型的具体实现采取不同行为的能力。如果某个类型实现了某个接口，那么所有使用这个接口的地方，都可以支持这种类型的值。即不同的数据类型的实体实现提供统一的接口。Go中没有类的概念，它的多态是靠接口来实现的。",
                  browserNumber:100,
                  collectNumber:10,
                  coinNumber:35,
                },
                {
                  title:"多态",
                  id:"64634ef4c1bf557ea6bf44ce",
                  content:"多态是指根据类型的具体实现采取不同行为的能力。如果某个类型实现了某个接口，那么所有使用这个接口的地方，都可以支持这种类型的值。即不同的数据类型的实体实现提供统一的接口。Go中没有类的概念，它的多态是靠接口来实现的。",
                  browserNumber:100,
                  collectNumber:10,
                  coinNumber:35,
                }
              ] 
          }
      },
      components:{
        ForumItem
      },
      methods:{
         
      },
     
      mounted(){
        this.category = this.$route.params.category
        this.theme = "radius-bg-"+this.category

        let {"notify":notify,"learn":learn,"love":love,"roast":roast} = sentence
        switch(this.category){
          case 'notify':
              this.sentence = notify[Math.floor(Math.random() * notify.length)]
              this.categoryName = "通知墙"
              break;
          case 'learn':
              this.sentence = learn[Math.floor(Math.random() * learn.length)]
              this.categoryName = "学习墙"
              break;
          case 'roast':
              this.sentence = roast[Math.floor(Math.random() * roast.length)]
              this.categoryName = "吐槽墙"
              break;
          default:
              this.sentence = love[Math.floor(Math.random() * love.length)]
              this.categoryName = "表白墙"
              break;
        }
      },
      beforeCreate() {
        
        let height = window.screen.availHeight;
        document.querySelector('body').setAttribute('style', 'height: '+height + 'px');
        
      },
      beforeDestroy(){
  
      }
  }
  
    
  </script>
  <style>
    #category-title{
      position:absolute;
      top: 8px;
      left: 10px;
      color: whitesmoke;
      font-size: 20px;
      font-weight: 800;
      z-index: 8;
    }
    #radius-bg-base{
      position: relative;
      width: 100%;
      height: 100px;
      overflow: hidden;
      text-align: center;
      line-height: 100px;
      font-size: 8px;
      font-family: "SimSun";
      font-weight: bold;
    }
    .radius-bg-learn::after{
      content: '';
      width: 140%;
      height: 100px;
      position: absolute;
      left: -20%;
      top: 0px;
      z-index: 5;
      border-radius: 0 0 50% 50%;
      background-color: #34CD65;
    }
    .radius-bg-roast::after{
      content: '';
      width: 140%;
      height: 100px;
      position: absolute;
      left: -20%;
      top: 0px;
      z-index: 5;
      border-radius: 0 0 50% 50%;
      background-color: #ABADBB;
    }
    .radius-bg-notify::after{
      content: '';
      width: 140%;
      height: 100px;
      position: absolute;
      left: -20%;
      top: 0px;
      z-index: 5;
      border-radius: 0 0 50% 50%;
      background-color: #ABB78B;
    }
    .radius-bg-love::after{
      content: '';
      width: 140%;
      height: 100px;
      position: absolute;
      left: -20%;
      top: 0px;
      z-index: 5;
      border-radius: 0 0 50% 50%;
      background-color: #DEB4B2;
    }
    .radius-bg-font-show{
      position: relative;
      z-index: 8;
    }
    .frame-outer{
      width: 100%;
    }
    .forum-list-outer{
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-top: 5px;
      padding-bottom: 5px;
    }
  
  </style>